<template>
	<view class="container container24934">
		<view v-if="token">
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz">
				<view class="flex diygw-col-24 items-center flex-nowrap">
					<view class="flex diygw-col-4">
						<view class="diygw-avatar  radius bg-none">
							<image mode="aspectFit" class="diygw-avatar-img radius lg" :src="avatar">
							</image>
						</view>
					</view>
					<view class="diygw-col-13 text-clz"> {{ nickname }} </view>
					<view class="diygw-title flex diygw-col-8" @click="updateProfile(avatar,nickname)">
						<view class="title title-title font-normal"> <text class="title-icon diy-icon-write"></text>
							修改资料
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex2-clz">
				<view class="flex diygw-col-24">
					<view class="diygw-grid col-3">
						<view class="diygw-grid-item" @click="navigate('adopt/index')">
							<view class="diygw-grid-inner">
								<view class="diygw-grid-icon diygw-avatar">
									<image mode="aspectFit" class="diygw-avatar-img" src="/static/user/user1.png">
									</image>
								</view>
								<view class="diygw-grid-title"> 我的领养 </view>
							</view>
						</view>
						<view class="diygw-grid-item" @click="navigate('deliver/index')">
							<view class="diygw-grid-inner">
								<view class="diygw-grid-icon diygw-avatar">
									<image mode="aspectFit" class="diygw-avatar-img" src="/static/user/user2.png">
									</image>
								</view>
								<view class="diygw-grid-title"> 我的送养 </view>
							</view>
						</view>
						<view class="diygw-grid-item" @click="navigate('select/index')">
							<view class="diygw-grid-inner">
								<view class="diygw-grid-icon diygw-avatar">
									<image mode="aspectFit" class="diygw-avatar-img" src="/static/user/user3.png">
									</image>
								</view>
								<view class="diygw-grid-title"> 我的寻宠 </view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex3-clz">
				<view class="flex diygw-col-24 items-center flex-nowrap">
					<view class="flex diygw-col-2">
						<view class="diygw-avatar sm radius bg-none">
							<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/user/collect.png">
							</image>
						</view>
					</view>
					<view class="diygw-title flex diygw-col-24">
						<view class="title title1-title font-normal"> 我的收藏 </view>
						<view class="more title1-more">
							<text class="diy-icon-right"></text>
						</view>
					</view>
				</view>
				<view class="flex diygw-col-24 items-center flex-nowrap">
					<view class="flex diygw-col-2">
						<view class="diygw-avatar sm radius bg-none">
							<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/user/order.png">
							</image>
						</view>
					</view>
					<view class="diygw-title flex diygw-col-24">
						<view class="title title3-title font-normal"> 我的订单 </view>
						<view class="more title3-more">
							<text class="diy-icon-right"></text>
						</view>
					</view>
				</view>
				<view class="flex diygw-col-24 items-center flex-nowrap">
					<view class="flex diygw-col-2">
						<view class="diygw-avatar sm radius bg-none">
							<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/user/position.png">
							</image>
						</view>
					</view>
					<view class="diygw-title flex diygw-col-24">
						<view class="title title2-title font-normal"> 收货地址 </view>
						<view class="more title2-more">
							<text class="diy-icon-right"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex4-clz">
				<view class="flex diygw-col-24 items-center flex-nowrap">
					<view class="flex diygw-col-2">
						<view class="diygw-avatar sm radius bg-none">
							<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/user/area.png"></image>
						</view>
					</view>
					<view class="diygw-title flex diygw-col-24">
						<view class="title title4-title font-normal"> 基地管理 </view>
						<view class="more title4-more">
							<text class="diy-icon-right"></text>
						</view>
					</view>
				</view>
				<view class="flex diygw-col-24 items-center flex-nowrap">
					<view class="flex diygw-col-2">
						<view class="diygw-avatar sm radius bg-none">
							<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/user/id.png"></image>
						</view>
					</view>
					<view class="diygw-title flex diygw-col-24">
						<view class="title title5-title font-normal"> 实名认证 </view>
						<view class="more title5-more">
							<text class="diy-icon-right"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex13-clz">
				<view class="flex diygw-col-24">
					<button class="diygw-btn none radius-xs flex-sub margin-xs button2-button-clz"
						@click="logout()">退出登录</button>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex5-clz">
				<view class="flex diygw-col-24 justify-center items-center flex-nowrap">
					<view class="diygw-col-4 text-grey"> 领养咨询: </view>
					<view class="flex diygw-col-4">
						<button class="diygw-btn orange xs radius-xs flex-sub margin-xs button-button-clz"
							@tap="navigateTo" data-id="modal" data-type="openmodal">联系我</button>
					</view>
				</view>
				<view class="flex diygw-col-24 justify-center items-center flex-nowrap">
					<view class="diygw-col-4 text-grey"> 云养咨询: </view>
					<view class="flex diygw-col-4">
						<button class="diygw-btn orange xs radius-xs flex-sub margin-xs button1-button-clz"
							@tap="navigateTo" data-id="modal" data-type="openmodal">联系我</button>
					</view>
				</view>
			</view>

			<view
				class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex8-clz text-grey">
				<view class="diygw-col-13"> ——让每一个流浪毛孩都有家—— </view>
			</view>

			<view class="diygw-modal basic" :class="modal" style="z-index: 100000">
				<view class="diygw-dialog diygw-dialog-modal basis-lg">
					<view class="justify-end diygw-bar">
						<view class="content"> 长按识别添加 </view>
						<view class="action" data-type="closemodal" data-id="modal" @tap="navigateTo">
							<i class="diy-icon-close"></i>
						</view>
					</view>
					<view>
						<image mode="aspectFit" class="" src="/static/user/wxjwh.jpg"></image>
					</view>
				</view>
			</view>

			<view class="clearfix"></view>
		</view>
		<view v-else >
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex110-clz">
				<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex111-clz">
					<view class="flex diygw-col-4">
						<view class="diygw-avatar lg radius bg-none">
							<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/user/avatar.png">
							</image>
						</view>
					</view>
				</view>
				<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex211-clz">
					<view class="flex diygw-col-21">
						<button class="diygw-btn orange radius-xl flex-sub margin-xs button111-button-clz"
							@click="getUserInfo">一键登录</button>
					</view>
				</view>
				<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex311-clz">
					<view class="diygw-col-8 text111-clz"> 登录后尽享更多权益 </view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	// import * as pinyin from 'pinyin'
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				modal: '',
				token:'',
				avatar:'',
				nickname:''
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {
				this.isToken()
			},
			navigate(url) {
				uni.navigateTo({
					url: `${url}`
				})
			},
			getUserInfo(e) {
				uni.getUserProfile({
					desc: '登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						console.log(res)
						// console.log(res.errMsg)
						if (res.errMsg == "getUserProfile:ok") {
							const userInfo = res.userInfo
							console.log(userInfo)
							const username = userInfo.nickName
							this.nickname = userInfo.nickName
							const password = userInfo.nickName
							this.avatar = userInfo.avatarUrl
							console.log(this.avatar)
							this.login(username, password)
						}
					},
					fail: (res) => {
						console.log(res.errMsg)
						if (res.errMsg == "getUserProfile:fail auth deny") {
							uni.showToast({
								title: '您取消了授权!',
								icon: 'error',
								duration: 2000
							});
						}
					}
				})
			},
			updateProfile(avatar,nickname){
				uni.navigateTo({
					url:'/pages/user/details?avatar='+avatar+'&nickname='+nickname
				})
			},
			async login(username, password) {
				const http_url = '/index/app/login'
				const data = {
					username,
					password
				}
				const header = {
					'content-type': 'application/json;charset=UTF-8',
				}
				const result = await this.$http.post(http_url, data, header)
				const code = result.code
				if (code == 200) {
					const token = result.data.token
					this.token = token
					uni.setStorageSync('token', token);
					
					uni.showToast({
						title: '授权成功',
						icon: 'success',
						duration: 2000
					});
				}

			},
			logout() {
				uni.clearStorageSync()
				uni.showToast({
					title: '退出成功',
					icon: 'success',
					duration: 2000
				});


			},
			isToken() {
				const token = uni.getStorageSync('token')
				this.token = token
				
			}
		},
		onPullDownRefresh() {
			this.init()
		},
	};
</script>

<style lang="scss" scoped>
	.flex-clz {
		margin-top: 20rpx;
		padding-top: 10rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		padding-right: 10rpx;
	}

	.modal-clz {
		z-index: 0;
	}

	.button2-button-clz {
		margin: 6rpx !important;
	}

	.flex13-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 12rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		border-top-right-radius: 12rpx;
		margin-right: 20rpx;
		margin-left: 20rpx;
		box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		padding-right: 10rpx;
	}

	.diygw-dialog-modal {}

	.avatar-clz {
		margin-left: 20rpx;
		width: calc(20.8333333333% - 20rpx - 0rpx) !important;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 0rpx;
	}

	.text-clz {
		font-weight: bold;
		font-size: 30rpx !important;
	}

	.title-title {
		font-size: 14px;
	}

	.title-more {
		font-size: 12px;
	}

	.flex2-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 12rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		border-top-right-radius: 12rpx;
		margin-right: 20rpx;
		margin-left: 20rpx;
		box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 20rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		padding-right: 10rpx;
	}

	.flex3-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 12rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		border-top-right-radius: 12rpx;
		margin-right: 20rpx;
		margin-left: 20rpx;
		box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		padding-right: 10rpx;
	}

	.title1-title {
		font-size: 16px;
	}

	.title1-more {
		font-size: 12px;
	}

	.title2-title {
		font-size: 16px;
	}

	.title2-more {
		font-size: 12px;
	}

	.title3-title {
		font-size: 16px;
	}

	.title3-more {
		font-size: 12px;
	}

	.flex4-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 12rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		border-top-right-radius: 12rpx;
		margin-right: 20rpx;
		margin-left: 20rpx;
		box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		padding-right: 10rpx;
	}

	.title4-title {
		font-size: 16px;
	}

	.title4-more {
		font-size: 12px;
	}

	.title5-title {
		font-size: 16px;
	}

	.title5-more {
		font-size: 12px;
	}

	.flex5-clz {
		margin-left: 10rpx;
		padding-top: 10rpx;
		padding-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		padding-bottom: 10rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 10rpx;
	}

	.button-button-clz {
		margin: 3px !important;
	}

	.button1-button-clz {
		margin: 3px !important;
	}

	.flex8-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 40rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.flex110-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 200rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.flex111-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.flex211-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.button111-button-clz {
		margin: 6rpx !important;
	}

	.flex311-clz {
		margin-left: 10rpx;
		padding-top: 10rpx;
		padding-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		padding-bottom: 10rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 10rpx;
	}

	.text111-clz {
		color: #a0a0a0;
	}

	.container24934 {
		padding-left: 0px;
		padding-right: 0px;
	}

	.container24934 {}
</style>